<template>
  <div class="industry-belt-page">
    <div class="content-wrapper">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <div class="header-title">
            <h1>行业会议</h1>
            <p>汇聚行业智慧,分享前沿动态,推动产业发展。</p>
          </div>
        </div>
      </div>

      <!-- 导航标签 -->
      <div class="nav-tabs">
        <div class="tabs-container">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            :class="['tab-item', { active: activeTab === tab.key }]"
            @click="switchTab(tab.key)"
          >
            {{ tab.label }}
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="5" animated />
          <p class="loading-text">正在加载数据...</p>
        </div>

        <!-- 会议视频 -->
        <div v-else-if="activeTab === 'video'" class="tab-content">
          <div class="video-grid">
            <div v-for="video in videoList" :key="video.id" class="video-card">
              <div class="video-thumbnail">
                <img :src="video.coverImageUrl" />
                <div class="duration-tag">{{ formatDuration(video.durationMinutes) }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <p class="video-desc">{{ video.summary }}</p>
                <div class="video-tags">
                  <span v-for="tag in video.tags" :key="tag.id" class="tag">{{ tag.tagName }}</span>
                </div>
                <div class="video-meta">
                  <span class="date"
                    ><el-icon class="date-icon"><Calendar /></el-icon> {{ formatDate(video.publishDate) }}</span
                  >
                  <el-button type="primary" class="watch-btn" @click="watchVideo(video)">观看视频</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 会议新闻 -->
        <div v-else-if="activeTab === 'news'" class="tab-content">
          <div class="news-grid">
            <div v-for="news in newsList" :key="news.id" class="news-card">
              <div class="news-thumbnail">
                <img :src="news.coverImageUrl" />
              </div>
              <div class="news-content">
                <h3 class="news-title">{{ news.title }}</h3>
                <div class="news-meta">
                  <span class="date">
                    <el-icon class="date-icon"><Calendar /></el-icon> {{ formatDate(news.publishDate) }}
                  </span>
                </div>
                <p class="news-summary">{{ news.summary }}</p>
                <div class="news-tags" v-if="news.tags && news.tags.length > 0">
                  <span v-for="tag in news.tags" :key="tag.id" class="tag">{{ tag.tagName }}</span>
                </div>
                <el-button type="primary" class="read-btn" @click="readNews(news)">阅读全文</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 未来会议 -->
        <div v-else-if="activeTab === 'future'" class="tab-content">
          <div class="conference-grid">
            <div v-for="conference in conferenceList" :key="conference.id" class="conference-card">
              <div class="card-header">
                <div class="flex items-center header-left">
                  <div class="date-badge">
                    <div class="day">{{ getDay(conference.conferenceDate || conference.eventTime) }}</div>
                    <div class="month">{{ getMonthLabel(conference.conferenceDate || conference.eventTime) }}</div>
                  </div>
                  <div class="time-range">
                    <el-icon class="time-icons"><Clock /></el-icon>
                    <span
                      >{{ (conference.startTime || '').substring(0, 5) }}-{{
                        (conference.endTime || '').substring(0, 5)
                      }}</span
                    >
                  </div>
                </div>
                <div v-if="!isUpcoming(conference)" :class="['status-chip', getStatusClass(conference)]">
                  {{ getRegistrationStatusLabel(conference) }}
                </div>
                <div v-else class="soon-chip">即将开始</div>
              </div>

              <div class="conference-content">
                <h3 class="conference-title">{{ conference.title }}</h3>

                <div class="conference-details">
                  <!-- <div class="detail-item">
                    <el-icon><Clock /></el-icon>
                    <span>时间: {{ formatDate(conference.conferenceDate || conference.eventTime) }}</span>
                  </div> -->
                  <!-- <div class="detail-item">
                    <el-icon><Location /></el-icon>
                    <span>地点: {{ conference.location || '待定' }}</span>
                  </div>
                  <div class="detail-item">
                    <el-icon><Timer /></el-icon>
                    <span>报名截止: {{ formatDate(conference.registrationDeadline) }}</span>
                  </div> -->
                </div>

                <p class="conference-desc">{{ conference.summary || conference.description || '暂无介绍' }}</p>

                <p class="conference-desc">
                  <el-icon><Location /></el-icon> {{ conference.location || '待定' }}
                </p>
                <div v-if="splitTags(conference.tag).length" class="tag-list mb-16px">
                  <span v-for="t in splitTags(conference.tag)" :key="t" class="tag-chip">{{ t }}</span>
                </div>
                <div class="conference-meta">
                  <div class="meta-left">
                    <span class="meta-item">
                      <el-icon><OfficeBuilding /></el-icon> {{ conference.organizer }}
                    </span>
                  </div>
                  <el-button
                    type="primary"
                    class="register-btn"
                    :icon="Edit"
                    :disabled="conference.isRegistered || !isRegistrationOpen(conference)"
                    @click="registerConference(conference)"
                  >
                    {{ conference.isRegistered ? '已报名' : isRegistrationOpen(conference) ? '报名' : '报名已截止' }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 报名表单弹窗 -->
      <el-dialog
        v-model="registrationVisible"
        width="600px"
        :before-close="cancelRegistration"
        :center="true"
        :align-center="true"
        class="registration-dialog"
      >
        <template #header>
          <div class="dialog-header">
            <div class="header-top">
              <div class="dialog-title">
                <el-icon class="title-icon"><Calendar /></el-icon>
                <span>报名会议</span>
              </div>
              <div class="close-button" @click="cancelRegistration">
                <el-icon><Close /></el-icon>
              </div>
            </div>
            <div class="conference-title">{{ currentConference?.title }}</div>
          </div>
        </template>
        <el-form
          :model="registrationForm"
          label-width="100px"
          :rules="registrationRules"
          ref="registrationFormRef"
          class="registration-form"
        >
          <el-form-item label="会议名称">
            <el-input :value="currentConference?.title" disabled class="disabled-input" />
          </el-form-item>

          <el-form-item label="参与者类型" prop="participantType">
            <el-select v-model="registrationForm.participantType" placeholder="请选择参与者类型" class="full-width">
              <el-option label="个人" value="个人" />
              <el-option label="公司" value="公司" />
              <el-option label="机构" value="机构" />
            </el-select>
          </el-form-item>

          <el-form-item label="参会单位" prop="participantUnitName">
            <el-input
              v-model="registrationForm.participantUnitName"
              placeholder="请输入参会单位名称"
              maxlength="50"
              show-word-limit
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="registrationForm.contactPhone"
              placeholder="请输入联系电话"
              maxlength="12"
              show-word-limit
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="参会目的" prop="purposeOfAttending">
            <el-input
              v-model="registrationForm.purposeOfAttending"
              type="textarea"
              placeholder="请输入参会目的"
              :rows="3"
              maxlength="200"
              show-word-limit
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="参会人数" prop="numberOfAttendees">
            <el-input-number
              v-model="registrationForm.numberOfAttendees"
              :min="1"
              :max="10"
              placeholder="请输入参会人数"
              class="full-width"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="cancelRegistration">取消</el-button>
          <el-button type="primary" @click="submitRegistration" :loading="registrationLoading">
            {{ registrationLoading ? '提交中...' : '确认报名' }}
          </el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
  Calendar,
  Clock,
  Edit,
  Location,
  Timer,
  User,
  View,
  Star,
  OfficeBuilding,
  Close,
} from '@element-plus/icons-vue'
import { industryBeltApi } from '~/server/industryBeltApi'
import { useIndustryBeltStore } from '~/stores/industryBelt'
import { ElMessage } from 'element-plus'
import { formatDuration, parseDurationToMinutes } from '~/utils/duration'
import { useUserStore } from '~/stores/user'

// 标签页配置
const tabs = [
  { key: 'video', label: '行业视频' },
  { key: 'news', label: '行业新闻' },
  { key: 'future', label: '行业活动' },
]

// 当前激活的标签
const activeTab = ref('video')

// 获取路由参数
const route = useRoute()

// 加载状态
const loading = ref(false)

// 报名表单相关
const registrationVisible = ref(false)
const currentConference = ref<ConferenceItem | null>(null)
const userStore = useUserStore()
const registrationForm = ref({
  participantUnitName: '',
  conferenceId: 0,
  participantType: '公司',
  numberOfAttendees: 1,
  userId: 0,
  purposeOfAttending: '',
  contactPhone: '',
})
const registrationLoading = ref(false)
const registrationFormRef = ref()

// 表单验证规则
// 可选手机号/座机校验：为空通过；有值则验证格式
const optionalPhoneValidator = (_rule: any, value: string, callback: any) => {
  if (!value) return callback()
  const mobile = /^1[3-9]\d{9}$/
  const landline = /^(\d{3,4}-)?\d{7,8}$/
  const intl = /^\+?\d{6,20}$/
  if (mobile.test(value) || landline.test(value) || intl.test(value)) return callback()
  callback(new Error('请输入有效的手机或座机号码'))
}

const registrationRules = {
  participantType: [{ required: true, message: '请选择参与者类型', trigger: 'change' }],
  participantUnitName: [
    { required: true, message: '请输入参会单位名称', trigger: 'blur' },
    { min: 2, max: 50, message: '单位名称长度在 2 到 50 个字符', trigger: 'blur' },
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { min: 7, max: 12, message: '联系电话长度在 7 到 12 个字符', trigger: 'blur' },
  ],
  purposeOfAttending: [
    { required: true, message: '请输入参会目的', trigger: 'blur' },
    { min: 2, max: 200, message: '参会目的长度在 2 到 200 个字符', trigger: 'blur' },
  ],
  numberOfAttendees: [
    { required: true, message: '请输入参会人数', trigger: 'blur' },
    { type: 'number' as const, min: 1, max: 10, message: '参会人数必须在 1 到 10 之间', trigger: 'blur' },
  ],
}

// 切换标签
const switchTab = (tabKey: string) => {
  activeTab.value = tabKey
  // 更新URL参数
  navigateTo(
    {
      path: '/industry-belt',
      query: { tab: tabKey },
    },
    { replace: true },
  )
  loadData()
}

// 定义数据类型
interface VideoItem {
  id: number
  title: string
  summary: string
  durationMinutes: number
  publishDate: string
  coverImageUrl: string
  videoUrl: string
  views: number
  likes: number
  collects: number
  tags: Array<{
    id: number
    tagName: string
    status: any
    createTime: any
  }>
}

interface NewsItem {
  id: number
  title: string
  summary: string
  publishDate: string
  coverImageUrl: string
  content: string
  views: number
  likes: number
  collects: number
  tags: Array<{
    id: number
    tagName: string
    status: any
    createTime: any
  }>
}

interface ConferenceItem {
  id: number
  title: string
  summary: string
  eventTime: string
  location: string
  registrationDeadline: string
  estimatedAttendees: number
  organizer: string
  contactPhone: string
  status: boolean
  isDel: boolean
  createTime: string
  updateTime: string
  isRegistered: boolean
}

// 会议视频数据
const videoList = ref<VideoItem[]>([])

// 会议新闻数据
const newsList = ref<NewsItem[]>([])
const industryStore = useIndustryBeltStore()

// 未来会议数据
const conferenceList = ref<ConferenceItem[]>([])

// 加载数据
const loadData = async () => {
  try {
    loading.value = true

    if (activeTab.value === 'video') {
      await loadVideoList()
    } else if (activeTab.value === 'news') {
      await loadNewsList()
    } else if (activeTab.value === 'future') {
      await loadConferenceList()
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// ------- 新接口字段映射辅助函数 -------
const normalizeUrl = (url: any) => (typeof url === 'string' ? url.replace(/`/g, '').trim() : '')
const toTagArray = (tags: any) => {
  if (Array.isArray(tags)) return tags
  if (typeof tags === 'string' && tags.trim()) {
    return tags
      .split(',')
      .map((t: string, i: number) => ({ id: i + 1, tagName: t.trim(), status: undefined, createTime: undefined }))
  }
  return []
}
const mapConferenceVideo = (raw: any): VideoItem => ({
  id: raw?.id ?? 0,
  title: raw?.title ?? '',
  summary: raw?.news ?? raw?.description ?? '',
  durationMinutes: parseDurationToMinutes(raw?.videoDuration ?? 0),
  publishDate: raw?.conferenceDate ?? raw?.updateTime ?? '',
  coverImageUrl: normalizeUrl(raw?.videoThumbnailUrl ?? raw?.coverImageUrl),
  videoUrl: normalizeUrl(raw?.videoUrl ?? ''),
  views: 0,
  likes: 0,
  collects: 0,
  tags: toTagArray(raw?.tags),
})
const mapConferenceNews = (raw: any): NewsItem => ({
  id: raw?.id ?? 0,
  title: raw?.title ?? '',
  summary: raw?.news ?? raw?.description ?? '',
  publishDate: raw?.conferenceDate ?? raw?.updateTime ?? '',
  coverImageUrl: normalizeUrl(raw?.coverImageUrl),
  content: raw?.newsContent ?? '',
  views: 0,
  likes: 0,
  collects: 0,
  tags: toTagArray(raw?.tags),
})

// 加载会议视频列表
const loadVideoList = async () => {
  try {
    const response = await industryBeltApi.content.getList({ contentType: 'VIDEO', pageNum: 1, pageSize: 20 })
    const list = Array.isArray(response?.list) ? response.list : []
    videoList.value = list.map((item: any) => mapConferenceVideo(item))
    industryStore.cacheVideoList(videoList.value)
  } catch (error) {
    console.error('加载会议视频失败:', error)
    const errorMessage = error?.toString() || ''
    if (errorMessage.includes('401') || errorMessage.includes('402') || errorMessage.includes('登录')) {
      // ElMessage.warning('请先登录后再查看产业带')
    } else {
      ElMessage.error('加载会议视频失败，请稍后重试')
    }
    videoList.value = []
  }
}

// 加载会议新闻列表
const loadNewsList = async () => {
  try {
    const response = await industryBeltApi.content.getList({ contentType: 'NEWS', pageNum: 1, pageSize: 20 })
    const list = Array.isArray(response?.list) ? response.list : []
    newsList.value = list.map((item: any) => mapConferenceNews(item))
    industryStore.cacheNewsList(newsList.value)
  } catch (error) {
    console.error('加载会议新闻失败:', error)
    const errorMessage = error?.toString() || ''
    if (errorMessage.includes('401') || errorMessage.includes('402') || errorMessage.includes('登录')) {
      ElMessage.warning('请先登录后再查看会议新闻')
    } else {
      ElMessage.error('加载会议新闻失败，请稍后重试')
    }
    newsList.value = []
  }
}

// 加载未来会议列表
const loadConferenceList = async () => {
  try {
    const response = await industryBeltApi.conference.getList()
    conferenceList.value = response.list || []
  } catch (error) {
    console.error('加载未来会议失败:', error)
    const errorMessage = error?.toString() || ''
    if (errorMessage.includes('401') || errorMessage.includes('402') || errorMessage.includes('登录')) {
      ElMessage.warning('请先登录后再查看未来会议')
    } else {
      ElMessage.error('加载未来会议失败，请稍后重试')
    }
    conferenceList.value = []
  }
}

// 格式化时长由统一工具提供（分钟可含小数，显示到秒）

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化日期时间
const formatDateTime = (dateString: string) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 页面加载时获取数据
onMounted(() => {
  // 根据URL参数设置初始标签页
  const tabParam = route.query.tab as string
  if (tabParam && ['video', 'news', 'future'].includes(tabParam)) {
    activeTab.value = tabParam
  }

  loadData()
})

// 观看视频 - 跳转到视频详情页面
const watchVideo = (video: VideoItem) => {
  navigateTo(`/industry-belt/video/${video.id}`)
}

// 阅读新闻 - 跳转到详情页面
const readNews = (news: NewsItem) => {
  // 先缓存当前新闻，避免详情页再次发起详情请求
  industryStore.setCurrentNews(news)
  // 跳转到新闻详情页面
  navigateTo(`/industry-belt/news/${news.id}`)
}

// 报名会议
const registerConference = (conference: ConferenceItem) => {
  currentConference.value = conference
  const uid = (userStore.userInfos && (userStore.userInfos.id || userStore.userInfos.userId)) || 0
  registrationForm.value = {
    participantUnitName: '',
    conferenceId: conference.id,
    participantType: '公司',
    numberOfAttendees: 1,
    userId: uid,
    purposeOfAttending: '',
    contactPhone: '',
  }
  registrationVisible.value = true
}

// 提交报名表单
const submitRegistration = async () => {
  try {
    // 同步用户ID（避免用户在打开弹窗后登录状态变化）
    const uid = Number((userStore.userInfos && (userStore.userInfos.id || userStore.userInfos.userId)) || 0)
    registrationForm.value.userId = uid
    // if (!uid) {
    //   ElMessage.warning('请先登录后再进行会议报名')
    //   return
    // }

    // 表单验证
    await registrationFormRef.value.validate()

    registrationLoading.value = true

    // 按后端规范构造参数
    const payload = {
      participantUnitName: registrationForm.value.participantUnitName,
      conferenceId: registrationForm.value.conferenceId,
      participantType: registrationForm.value.participantType,
      numberOfAttendees: registrationForm.value.numberOfAttendees,
      userId: registrationForm.value.userId,
      purposeOfAttending: registrationForm.value.purposeOfAttending,
      contactPhone: registrationForm.value.contactPhone,
    }

    // 调用报名接口
    await industryBeltApi.conference.register(payload as any)

    ElMessage.success('报名成功！')
    registrationVisible.value = false

    // 更新会议列表中的报名状态
    if (currentConference.value) {
      const conference = conferenceList.value.find((c) => c.id === currentConference.value!.id)
      if (conference) {
        conference.isRegistered = true
      }
    }
  } catch (error) {
    if (error === false) {
      // 表单验证失败
      return
    }
    console.error('报名失败:', error)
    const errorMessage = error?.toString() || ''
    if (errorMessage.includes('401') || errorMessage.includes('402') || errorMessage.includes('登录')) {
      ElMessage.warning('请先登录后再进行会议报名')
    } else {
      ElMessage.error('报名失败，请稍后重试')
    }
  } finally {
    registrationLoading.value = false
  }
}

// 取消报名
const cancelRegistration = () => {
  registrationVisible.value = false
  currentConference.value = null
  registrationForm.value = {
    participantUnitName: '',
    conferenceId: 0,
    participantType: '公司',
    numberOfAttendees: 1,
    userId: 0,
    purposeOfAttending: '',
    contactPhone: '',
  }
}

// ===== 辅助方法：标签分割、报名状态、日期徽章 =====
// 标签分割：支持中英文逗号、顿号、分号、空白
const splitTags = (input: any): string[] => {
  if (!input) return []
  if (Array.isArray(input)) {
    return input
      .map((t: any) => (typeof t === 'string' ? t : t?.tagName || ''))
      .map((t) => t.trim())
      .filter(Boolean)
  }
  if (typeof input === 'string') {
    return input
      .split(/[，,、;；\s]+/)
      .map((t) => t.trim())
      .filter(Boolean)
  }
  return []
}

// 报名状态与样式
const isRegistrationOpen = (c: any) => {
  if (!c?.registrationDeadline) return true
  const deadline = new Date(c.registrationDeadline)
  if (isNaN(deadline.getTime())) return true
  deadline.setHours(23, 59, 59, 999)
  const now = new Date()
  return now.getTime() <= deadline.getTime()
}
const getRegistrationStatusLabel = (c: any) => (isRegistrationOpen(c) ? '报名中' : '报名截止')
const getStatusClass = (c: any) => (isRegistrationOpen(c) ? 'status-open' : 'status-closed')

// 即将开始：会议日期在当前时间之后
const isUpcoming = (c: any) => {
  const startStr = c?.conferenceDate || c?.eventTime
  const start = new Date(startStr).getTime()
  const now = Date.now()
  return !!start && start > now
}

// 日期徽章：日与月
const getDay = (dateStr: string) => {
  const d = new Date(dateStr)
  const day = String(d.getDate()).padStart(2, '0')
  return day
}
const getMonthLabel = (dateStr: string) => {
  const d = new Date(dateStr)
  const month = String(d.getMonth() + 1).padStart(2, '0')
  return `${month}月`
}
</script>

<style scoped lang="scss">
.industry-belt-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40px 0;
  margin: 20px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.page-header {
  background: #fff;
  padding: 40px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;

  .header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .header-title {
    h1 {
      margin: 0 0 15px 0;
      color: #333;
      font-size: 36px;
      font-weight: 700;
    }

    p {
      margin: 0;
      color: #666;
      font-size: 16px;
      line-height: 1.6;
    }
  }
}

.nav-tabs {
  background: #fff;
  padding: 0 20px;
  margin-bottom: 20px;

  .tabs-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 0;
  }

  .tab-item {
    padding: 15px 30px;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      color: #409eff;
    }

    &.active {
      color: #409eff;
      border-bottom-color: #409eff;
    }
  }
}
// 左侧分组与时间样式
.header-left {
  gap: 4px;
}
// 新增：标签列表与样式，保持与页面一致
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  background-color: #f5f7fa;
  color: #666;
  font-size: 12px;
  border-radius: 12px;
  padding: 2px 10px;
  border: 1px solid #e5e7eb;
}
.time-range {
  display: inline-flex;
  align-items: center;
  color: #333;
  font-size: 13px;
  line-height: 18px;
}
.time-range .time-icon {
  margin-right: 3px;
  color: #e93323;
  font-size: 12px;
}
.time-icons {
  margin-right: 3px;
  color: #999999;
  font-size: 14px;
}
.time-range span {
  display: inline-block;
  vertical-align: middle;
}
.content-area {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.tab-content {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;

  .loading-text {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }
}

// 会议视频样式
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.video-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .video-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .duration-tag {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  .video-info {
    padding: 20px;

    .video-title {
      margin: 0 0 10px 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }

    .video-desc {
      margin: 0 0 15px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }

    .video-tags {
      margin-bottom: 15px;

      .tag {
        display: inline-block;
        background: #e6f7ff;
        color: #1890ff;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }

    .video-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .date-icon {
        color: #999;
        margin-right: 1px;
      }

      .date {
        color: #999;
        font-size: 14px;
        display: flex;
        align-items: center;
      }

      .watch-btn {
        border-radius: 20px;
        padding: 8px 20px;
      }
    }
  }
}

// 会议新闻样式
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.news-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .news-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .news-content {
    padding: 25px;

    .news-title {
      margin: 0 0 15px 0;
      color: #333;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.4;
    }

    .news-meta {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      color: #999;
      font-size: 14px;

      .date {
        display: flex;
        align-items: center;

        .date-icon {
          color: #999;
          margin-right: 1px;
        }
      }
    }

    .news-summary {
      margin: 0 0 15px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }

    .news-tags {
      margin-bottom: 20px;

      .tag {
        display: inline-block;
        background: #f0f9ff;
        color: #1890ff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }

    .read-btn {
      border-radius: 20px;
      padding: 8px 20px;
    }
  }
}

// 未来会议样式
.conference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

.conference-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 25px;
  transition: all 0.3s ease;
  position: relative;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  // 卡片头部，统一与组件的分组布局
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    height: 44px;
    background-color: #f9f9f9;
    padding: 0 8px;
  }

  // 日期徽章（左侧）
  .date-badge {
    position: static; /* 移除绝对定位 */
    width: 46px;
    height: 38px;
    border-radius: 8px;
    background: #e93323;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .day {
      font-size: 14px;
      line-height: 16px;
    }
    .month {
      font-size: 12px;
      line-height: 14px;
    }
  }

  // 状态胶囊（右侧）
  .status-chip {
    position: static; /* 移除绝对定位 */
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    border: 1px solid transparent;
    &.status-open {
      background: #e93323;
      color: #ffffff;
      border: none;
    }
    &.status-closed {
      background: #f5f5f5;
      color: #999;
      border-color: #e5e5e5;
    }
  }

  // 即将开始胶囊（右侧）
  .soon-chip {
    position: static; /* 移除绝对定位 */
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    color: #ffffff;
    background: #1e88e5;
    border: none;
  }

  .conference-content {
    padding-top: 0; /* 之前为 64px，因日期徽章不再绝对定位 */

    .conference-title {
      margin: 0 0 16px 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
    }

    .conference-details {
      margin-bottom: 12px;

      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        color: #666;
        font-size: 14px;

        .el-icon {
          margin-right: 8px;
          color: #999;
        }
      }
    }

    .conference-desc {
      margin: 8px 0 12px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }

    .conference-tags {
      margin-bottom: 12px;

      .tag-pill {
        display: inline-block;
        background: #f0f9ff;
        color: #1890ff;
        padding: 4px 10px;
        border-radius: 14px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
        border: 1px solid #e6f3ff;
      }
    }

    .conference-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: #f9f9f9;
      // <div class="flex items-center justify-between h-44px" style="background-color: #f9f9f9;">
      .meta-left {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;

        .meta-item {
          color: #666;
          font-size: 13px;
          display: inline-flex;
          align-items: center;
          .el-icon {
            margin-right: 6px;
            color: #999;
          }
        }
      }

      .register-btn {
        border-radius: 20px;
        padding: 8px 18px;
        width: auto;
        &:disabled {
          background: #f5f5f5;
          color: #999;
          border-color: #d9d9d9;
          cursor: not-allowed;
        }
      }
    }
  }
}

// 报名弹框样式
:deep(.registration-dialog) {
  .el-dialog {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 0;
    border-bottom: none;
    margin: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .el-dialog__body {
    padding: 30px;
    margin: 0;
  }

  .el-dialog__footer {
    padding: 20px 30px 30px;
    border-top: 1px solid #f0f0f0;
    margin: 0;
  }

  // 隐藏默认的关闭按钮
  .el-dialog__headerbtn {
    display: none;
  }
}

.dialog-header {
  background: #fff;
  border-radius: 12px 12px 0 0;
  position: relative;

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 15px;
    background: linear-gradient(135deg, #e93323 0%, #ff6b35 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    overflow: hidden;

    .dialog-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;

      .title-icon {
        margin-right: 8px;
        font-size: 22px;
      }
    }

    .close-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }

      .el-icon {
        font-size: 16px;
        color: white;
      }
    }
  }

  .conference-title {
    padding: 15px 30px 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    word-break: break-all;
    background: #fff;
  }
}

.registration-form {
  width: 100%;

  .el-form-item {
    margin-bottom: 24px;
    width: 100%;

    .el-form-item__label {
      font-weight: 500;
      color: #333;
      width: 100px !important;
      flex-shrink: 0;
    }

    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;

      .full-width {
        width: 100%;
      }

      .disabled-input {
        :deep(.el-input__inner) {
          background-color: #f5f7fa;
          color: #909399;
          cursor: not-allowed;
        }
      }

      .el-input {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus-within {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }

      .el-select {
        width: 100%;
      }

      .el-select :deep(.el-input__wrapper) {
        border-radius: 8px;
        border: 1px solid #dcdfe6;
        transition: all 0.3s ease;

        &:focus-within {
          border-color: #e93323;
          box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
        }
      }

      .el-textarea {
        :deep(.el-textarea__inner) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;
          resize: vertical;

          &:focus {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }

      .el-input-number {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus-within {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .video-grid,
  .news-grid,
  .conference-grid {
    grid-template-columns: 1fr;
  }

  .news-detail {
    .news-detail-meta {
      flex-direction: column;
      align-items: flex-start;

      .meta-right {
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 10px;
      }
    }
  }

  // 报名弹框移动端适配
  :deep(.registration-dialog) {
    .el-dialog {
      width: 95% !important;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 12px;
    }

    .el-dialog__header {
      margin: 0;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
    }

    .el-dialog__body {
      padding: 20px;
      margin: 0;
    }

    .el-dialog__footer {
      padding: 15px 20px 20px;
      margin: 0;
    }
  }

  .dialog-header {
    .header-top {
      padding: 15px 20px 12px;

      .dialog-title {
        font-size: 18px;
      }

      .close-button {
        width: 28px;
        height: 28px;

        .el-icon {
          font-size: 14px;
        }
      }
    }

    .conference-title {
      padding: 12px 20px 15px;
      font-size: 13px;
    }
  }

  .registration-form {
    .el-form-item {
      margin-bottom: 20px;
    }
  }

  .nav-tabs .tabs-container {
    flex-direction: column;
  }

  .tab-item {
    text-align: center;
    border-bottom: 1px solid #e4e7ed;
    border-right: none;

    &.active {
      border-bottom-color: #409eff;
    }
  }
}
</style>
